<template>
  <div class="app-container">
    <!--表格渲染-->
    <el-dialog
      :close-on-click-modal="false"
      :before-close="handleClose()"
      :visible.sync="flag"
      title="队列用户机构信息维护"
      width="1400px"
      @open="selUserUnit()"
    >
      <el-card class="box-card" :body-style="{ padding: '3px' }">
        <el-form>
          <el-row>
            <el-col :span="3">
              <el-form-item label="机构id" />
            </el-col>
            <el-col :span="3">
              <el-form-item label="机构名称" />
            </el-col>
            <el-col :span="3">
              <el-form-item label="用户id" />
            </el-col>
            <el-col :span="3">
              <el-form-item label="用户名称" />
            </el-col>
            <el-col :span="3">
              <el-form-item label="YARN队列" />
            </el-col>
            <el-col :span="3">
              <el-form-item label="IMPALA资源池" />
            </el-col>
          </el-row>
          <el-row>
            <el-form-item v-for="(item,i) in addForm.userUnitList" :key="i">
              <el-col :span="3">
                <el-form-item label="">
                  <el-input v-model="item.unitId" clearable placeholder="机构id" />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="">
                  <el-input v-model="item.unitName" clearable placeholder="机构名称" />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="">
                  <el-input v-model="item.userId" clearable placeholder="用户id" />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="">
                  <el-input v-model="item.userName" clearable placeholder="用户名称" />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="">
                  <el-input v-model="item.queue" clearable placeholder="YARN队列" />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="">
                  <el-input v-model="item.poolName" clearable placeholder="IMPALA资源池" />
                </el-form-item>
              </el-col>
              <el-button circle icon="el-icon-plus" @click="addList()" />
              <el-button v-if="i>0" circle icon="el-icon-minus" @click="subList(i)" />
            </el-form-item>
          </el-row>
        </el-form>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="flag = false">取消</el-button>
        <el-button type="primary" @click="saveUserUnit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { selUserUnit, saveUserUnit } from '@/api/monitor/clusterWh'

export default {
  data() {
    return {
      addForm: {
        centerId: '1',
        url: '',
        cmFlag: '',
        cmName: '',
        userUnitList: [{ 'unitId': '', 'unitName': '', 'queue': '', 'poolName': '', 'userId': '', 'userName': '' }]
      },
      flag: false,
      radio: 'YARN',
      cmFlag: '',
      centerId: '',
      clusterFlag: '',
      type: 'YARN',
      clusterList: []
    }
  },
  created() {
    // 获取当前中心
    this.selUserUnit()
  },
  methods: {
    addList() {
      this.addForm.userUnitList.push({ 'unitId': '', 'unitName': '', 'queue': '', 'poolName': '', 'userId': '', 'userName': '' })
    }, subList(index) {
      this.addForm.userUnitList.splice(index, 1)
    }, handleClose() {

    }, selUserUnit() {
      const params = {
        'centerId': this.centerId,
        'cmFlag': this.cmFlag
      }
      selUserUnit(params).then(res => {
        if (res != null && res.length > 0) {
          this.addForm.userUnitList = res
        } else {
          this.addForm.userUnitList = [{ 'unitId': '', 'unitName': '', 'queue': '', 'poolName': '', 'userId': '', 'userName': '' }]
        }
      }).catch(err => {
        if (err != null) {
          console.log(err.response.data.message)
        } else {
          console.log('请求失败!')
        }
      })
    }, saveUserUnit() {
      const reqData = {
        'centerId': this.centerId,
        'cmFlag': this.cmFlag,
        'hostInfoList': this.addForm.userUnitList
      }
      saveUserUnit(reqData).then(res => {
        this.$notify.success({
          title: '成功',
          message: '提交成功！',
          duration: 15000
        })
        this.flag = false
      }).catch(err => {
        this.$notify.error({
          title: '失败',
          message: '提交失败！',
          duration: 15000
        })
        if (err != null) {
          console.log(err.response.data.message)
        } else {
          console.log('请求失败!')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
